<template>
  <div class="classify-main">
      <div class="left">
          <div class="header boys">
             <i class="icon boys-icon"></i> 男生小说
          </div>
          <div class="content">
              <ul>
                 <li>
                     <router-link class="align-center" :to="{path:'/bookstore/classifyDetail', query:{key:item.key,name:item.name}}" v-for="(item,index) in this.classList.boy" :key="index">
                        <div class="item-left">
                            <img class="story-icon" :src="item.pic" onerror="this.src='https://static.kuaiyankanshu.net/';this.onerror=null" :alt="item.name">
                            </div>
                        <div class="item-right">
                            <p class="classify">{{item.name}}</p>
                            <p class="count">{{item.bookNum}}部</p>
                        </div>
                     </router-link>
                 </li>
              </ul>
          </div>
      </div>
      <div class="right">
          <div class="header girls">
             <i class="icon girls-icon"></i> 女生小说
          </div>
          <div class="content">
              <ul>
                 <li>
                     <router-link class="align-center" :to="{path:'/bookstore/classifyDetail', query:{key:item.key,name:item.name}}" v-for="(item,index) in this.classList.girl" :key="index">
                        <div class="item-left">
                        <img class="story-icon" :src="item.pic" onerror="this.src='https://static.kuaiyankanshu.net/';this.onerror=null" :alt="item.name">
                        </div>
                        <div class="item-right">
                        <p class="classify">{{item.name}}</p>
                        <p class="count">{{item.bookNum}}部</p>
                        </div>
                    </router-link>
                 </li>
              </ul>
          </div>
      </div>
  </div>
</template>

<script>
  import {Toast} from 'mint-ui'

  export default {
    props:{
        classList: {
            type: Object,
            default: function () {
                return {}
            }
        },
    },
    data () {
      return {
      }
    },
    created() {

    },
    methods: {
      
    }
    
  }
</script>
